<template>
  <div>
    <div class="box">
      <span>品类管理 -- 添加品类</span>
    </div>

    <div class="nav">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="所属分类">
          <el-select v-model="val" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类名称">
          <el-input v-model="form.name"></el-input> </el-form-item
      ></el-form>
      <el-button type="primary" @click="add">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getCopy, category } from "../../http/index";
export default {
  data() {
    return {
      form: {
        name: "",
      },
      options: [],
      list: [],
      val: "",
    };
  },
  methods: {
    add() {
      getCopy({
        parentId: this.val,
        categoryName: this.form.name,
      }).then((res) => {
        console.log(res);
      });
      this.$router.push("/category");
      this.$message.success("添加品类成功");
    },
    getList() {
      category({ categoryId: this.val }).then((res) => {
        console.log(res);
        this.options = res.data.data;
      });
    },
  },
  created() {},
  mounted() {
    this.getList();
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 35px;
}
.nav {
  width: 400px;
}
</style>

